<script setup lang="ts">
import { reactive, ref, computed, defineEmits } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { router, shortenString } from "@/utils/tools";
import { apiOrderBuyList, apiOrderSellList } from "@/apis/order";
import { isImg } from "@/utils/tools";
import { getImgSrc } from "@/utils/tools";

const emit = defineEmits(["refundChild", "confirmReceiptChild"]);
const props = defineProps({
  orderList: {
    type: Array,
    default: [],
  },
  scene: {
    type: String,
    default: "",
  },
});
const authenticationFilter = computed(() => {
  return (authentication) => {
    if (authentication === "0") {
      return "待认证";
    } else {
      return "已认证";
    }
  };
});
// 5-全部  0-待发货  1-待收货 2-已完成  3-退款售后  4-退款已完成
const sendTypeFilter = computed(() => {
  return (sendType) => {
    if (sendType === 0) {
      return "待发货";
    } else if (sendType === 1) {
      return "待收货";
    } else if (sendType === 2) {
      return "已完成";
    } else if (sendType === 3) {
      return "退款中";
    } else if (sendType === 4) {
      return "退款已完成";
    }
  };
});
const buyDetail = (item: any) => {
  router(`/pagesOrder/order/detail?id=${item.id}&scene=${props.scene}`);
};
const refund = (item: any) => {
  emit("refundChild", item.id);
};
const confirmReceipt = (item: any) => {
  emit("confirmReceiptChild", item.id);
};
onShow(() => {});

onLoad((options: any) => {});
</script>
<template>
  <view>
    <view class="card-wrap" v-for="(item, index) in orderList" :key="index">
      <view class="card-name">
        <view class="card-lft">
          <view class="card-lftimg">
            <image src="@/static/images/bugicon@2x.png" />
          </view>
          <text>{{ item.shopName }}</text>
        </view>
        <view class="card-rit">{{ sendTypeFilter(item.sendType) }}</view>
      </view>
      <uv-line color="#EEEEEE" margin="30rpx 0"></uv-line>
      <view class="card-info">
        <view class="card-img">
          <!-- <image :src="item.images" /> -->
          <!-- <image
            v-if="isImg(item?.images?.[0])"
            :src="item?.images?.[0]"
            mode="widthFix"
          />
          <image
            v-else
            :src="item?.images?.[0] + '?x-oss-process=video/snapshot,t_0,f_jpg'"
            getImgSrc
            mode="widthFix"
          /> -->
          <image :src="getImgSrc(item)" mode="widthFix" />
        </view>
        <view class="card-title">
          <view class="card-titletop">
            <view class="card-rz" v-if="item.authentication != '0'">
              {{ authenticationFilter(item.authentication) }}
            </view>
            <text>
              {{ item.title }}
            </text>
          </view>
          <view class="card-price">
            <view class="price-text">
              <text class="price-uni">￥</text>
              <text class="price-num">{{ item.currentPrice }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- <uv-line color="#EEEEEE" margin="30rpx 0"></uv-line> -->
      <view class="card-adress remark" v-if="item.remark">
        退货原因：{{item.remark}}
      </view>
      <!-- 0-待发货  1-待收货 2-已完成  3-退款售后  4-退款已完成  -->
      <view class="order-date">
        <view
          v-if="item.sendType === 0 || item.sendType === 1"
          class="order-tk"
          @click="refund(item)"
          >申请退款</view
        >
        <view
          v-if="item.sendType === 1"
          class="order-status"
          @click="confirmReceipt(item)"
          >确认收货</view
        >
        <view class="order-status" @click="buyDetail(item)">查看详情</view>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
.card-wrap {
  background: #ffffff;
  box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(211, 211, 211, 0.05);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  .card-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .card-lft {
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      display: flex;
      align-items: center;
      .card-lftimg {
        width: 48rpx;
        height: 48rpx;
        margin-right: 20rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .card-rit {
      font-weight: 400;
      font-size: 28rpx;
      color: #c7452f;
    }
  }
  .card-info {
    display: flex;
    align-items: top;
    justify-content: space-between;
    .card-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 14rpx;
      overflow: hidden;
      flex-shrink: 0;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .card-title {
      flex: 1;
      .card-titletop {
        font-size: 28rpx;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 112rpx;
        padding-left: 30rpx;
        .card-rz {
          width: 112rpx;
          padding: 14rpx 10rpx;
          background: #06a8ff;
          font-weight: 400;
          font-size: 22rpx;
          color: #ffffff;
          float: left;
          margin: 7rpx 10rpx 10rpx 10rpx;
          text-align: center;
          border-radius: 14rpx 14rpx 30rpx 14rpx;
        }
      }
      .card-price {
        display: flex;
        align-items: center;
        padding-left: 30rpx;
        .price-text {
          display: flex;
          align-items: baseline;
          .price-uni {
            color: #f52121;
            font-size: 24rpx;
            font-weight: bold;
          }
          .price-num {
            color: #f52121;
            font-size: 36rpx;
            font-weight: bold;
          }
        }
        .originalprice {
          font-weight: normal;
          font-size: 26rpx;
          color: #999999;
          text-decoration: line-through;
          margin-left: 16rpx;
        }
      }
    }
  }
  .card-adress {
    background: #f6f6f6;
    border-radius: 8rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #000000;
    padding: 20rpx 24rpx;
    margin-top: 30rpx;
  }
  .remark{
    color:#FF3A30;
  }
  .order-date {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 30rpx;
    .order-status {
      background: #c7452f;
      border-radius: 50rpx;
      font-weight: normal;
      font-size: 28rpx;
      color: #ffffff;
      padding: 14rpx 28rpx;
      margin-left: 20rpx;
    }
    .order-tk {
      padding: 10rpx 28rpx;
      background: #ffffff;
      border-radius: 50rpx;
      border: 1rpx solid #cccccc;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      // margin-right: 20rpx;
    }
  }
}
</style>
